<template>
  <el-dialog
    title="文档预览"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="80%">
    <div class="document-preview">
      <h2 class="title">{{ document.title }}</h2>
      <div class="meta">
        <span>分类：{{ document.categoryName }}</span>
        <span>版本：{{ document.version }}</span>
        <span>创建时间：{{ document.createTime }}</span>
      </div>
      <div class="content" v-html="document.content"></div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      document: {
        title: '',
        content: '',
        categoryName: '',
        version: '',
        createTime: ''
      }
    }
  },
  methods: {
    init (id) {
      this.visible = true
      this.$http({
        url: this.$http.adornUrl(`/doc/document/info/${id}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.document = data.document
        }
      })
    }
  }
}
</script>

<style scoped>
.document-preview {
  padding: 20px;
}
.title {
  text-align: center;
  margin-bottom: 20px;
}
.meta {
  color: #666;
  margin-bottom: 30px;
}
.meta span {
  margin-right: 20px;
}
.content {
  line-height: 1.8;
}
</style>
